import React, { useState, useEffect } from 'react';
import { Tabs } from 'antd';
import { connect } from 'dva';
import router from 'umi/router';
import CheckPanel from 'components/common/checkPanel';
import OnlineView from 'components/common/onlineView';
import BaseInfo from './components/baseInfo';
import { IsIE_nine } from 'utils/format'

import './index.styl';

const { TabPane } = Tabs;

function Detail({ dispatch, location, deviceLedger: { details }, process: { list } }) {
  // 项目ID
  const { id } = location.query;
  const [key, setKey] = useState('1');
  const procInsId = details && details.procInsId;
  useEffect(() => {
    // 获取详情
    dispatch({
      type: 'deviceLedger/getDetails',
      payload: { id },
    });
  }, [dispatch, id]);
  useEffect(() => {
    if (procInsId !== undefined) {
      // 获取流程
      dispatch({
        type: 'process/getList',
        payload: { id: procInsId },
      });
    }
  }, [dispatch, procInsId]);

  // 更新节点流程
  const getListAgain = () => {
    dispatch({
      type: 'process/getList',
      payload: { id: procInsId },
    });
  }
  function handleChange(key) {
    setKey(key)
  }

  return (
      <div className="device_detail">
        <Tabs
          defaultActiveKey={key}
          onChange={handleChange}
          style={{width: key === '1' ? '10.69rem' : '100%'}}
          className={IsIE_nine() === 9 && key === '2' ? 'IE9_left' : ''}
        >
          <TabPane tab="基本资料" key="1">
            <BaseInfo detail={details} />
          </TabPane>
          <TabPane tab="档案资料" key="2">
            <OnlineView detail={details} />
          </TabPane>
        </Tabs>
        {
          key === '1' ?
            <div className="check-panel">
              <CheckPanel
                list={list && list.slice(1, list.length)}
                id={id}
                processType={'device'}
                getListAgain={getListAgain}
                linkTo={() => {
                  router.push({
                    pathname: '/deviceLedger',
                    params: { isRefresh: true }
                  })
                }}
              />
            </div>
            :
            null
        }
      </div>
  );
}

export default connect(({ deviceLedger, process }) => ({
  deviceLedger,
  process,
}))(Detail);
